<template>
	<div v-if="list.length" class="wallet-recharge-activity mt-[10px]">
		<div class="h-4 flex items-center">
			<div class="title">{{ $t('recharge.activityTitle') }}</div>
			<div class="ml-2 text-sm">{{ $t('recharge.activitySelected') }} {{ abc[selectedIndex] }}</div>
		</div>
		<div class="my-2 mx-[-18px] px-[18px] flex flex-nowrap overflow-x-auto">
			<div
				v-for="(item, index) in list"
				:key="index"
				class="activity-item"
				:class="{
					recommend: item.recommend,
					selected: index === selectedIndex
				}"
				@click="handleSelected(index)">
				<p class="title">
					{{ item.title }}
				</p>
				<p class="desc">{{ item.desc }}</p>
				<div
					v-if="item.recommend"
					class="recommend absolute top-0 left-0 h-4 px-[11px] flex items-center">
					{{ $t('recharge.activityRecommended') }}
				</div>
				<div v-if="item.tncLink" class="tnc-link absolute top-[6px] right-[6px]">
					<base-icon name="hint" @click.stop="onClickDetail(item)" />
				</div>
				<rewards-countdown
					class="countdown w-fit mt-1"
					v-if="!item.isExpiredAt && Math.max(item.expiredAt - Date.now(), 0)"
					:time="Math.max(item.expiredAt - Date.now(), 0)"
					@finish="getActivitiesList" />
				<div
					v-if="abc[selectedIndex]"
					class="letter absolute bottom-[6px] right-[6px] text-lg text-t-2">
					{{ abc[index] }}
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { findIndex } from 'lodash-es'
import { useIntervalFn } from '@vueuse/core'
import { fmtAmount, goDetails, percentage, t } from '@/utils'
import { getBonusActivities, updateFirstBonus, updateReloadBonus } from '@/api/activity'
import { BaseIcon } from '@/components/base'
import { useAppStore, useWalletStore } from '@/store'
import { useDialog } from '@/hooks'
import RewardsCountdown from '@/views/activity/components/rewards-countdown/index.vue'

const appStore = useAppStore()
const selectedIndex = ref(-1)
const dialog = useDialog()
const walletStore = useWalletStore()

const list: any = ref([])

const abc = ['A', 'B', 'C', 'D', 'E', 'F']
const unselectObj = {
	title: t('recharge.activityUnselectTitle'),
	desc: t('recharge.activityUnselectDesc')
}

const getActivitiesList = async () => {
	const _list: any = []
	// 2 旧首充, 5 新首充
	try {
		const { data } = await getBonusActivities({})
		data.forEach((item: any) => {
			if (item.category === 2) {
				_list.push({
					...item,
					bonusId: item.bonusId,
					title: t('recharge.activityTitleB', [
						percentage(item.maxBonusPercentage, true),
						fmtAmount(item.maxBonus, {
							currency: appStore.currency,
							useName: true,
							precision: [0, true]
						})
					]),
					desc: t('recharge.activityDescB', [item.toMultiplier]),
					tncLink: 'rewards-bonus-ftd'
				})
			} else if ([5, 6].includes(item.category)) {
				_list.unshift({
					...item,
					bonusId: item.bonusId,
					title: t('recharge.activityTitleA', [
						percentage(item.maxBonusPercentage),
						fmtAmount(item.maxBonus, {
							currency: appStore.currency,
							useName: true,
							precision: [0, true]
						})
					]),
					desc: t('recharge.activityDescA'),
					tncLink: item.router,
					expiredAt: item.expiredAt,
					recommend: true
				})
			}
		})
		if (_list.length) {
			_list.push(unselectObj)
		}
	} catch (error) {
	} finally {
		// 初始化 变更一次选中状态
		if (selectedIndex.value === -1) {
			const index = findIndex(_list, { selected: true })
			if (index === -1) {
				// 默认选中第一项
				selectedIndex.value = 0
			} else {
				// 有选中的就取 来自云端的选项
				selectedIndex.value = index
			}
		}
		list.value = _list
	}
}

const handleSelected = (index: any) => {
	// 如果选择的是最后一项(放弃奖金);给出提示
	if (selectedIndex.value !== index && index === list.value.length - 1) {
		// message.warning(t('recharge.dialogForfeitMessage'))
		dialog.warning({
			title: t('recharge.dialogForfeitTitle'),
			content: t('recharge.dialogForfeitMessage')
		})
		selectedIndex.value = index
		// showDialog({
		// 	title: t('recharge.dialogForfeitTitle'),
		// 	message: t('recharge.dialogForfeitMessage'),
		// 	showCancelButton: true
		// })
	} else {
		selectedIndex.value = index
	}
}

const setActivities = async () => {
	try {
		if (list.value.length) {
			const item = list.value[selectedIndex.value]
			// 2,5 是首充 走首充接口; 6(新再充),?(旧再充)不知道是啥
			if ([2, 5].includes(item.category)) {
				await updateFirstBonus({ bonusId: item?.bonusId || '' })
			} else {
				await updateReloadBonus({ bonusId: item?.bonusId || '' })
			}
		}
	} catch (error) {}
}

const onClickDetail = (item: any) => {
	walletStore.setWalletDepositShow(false)
	goDetails(item.tncLink)
}

useIntervalFn(getActivitiesList, 10000, { immediateCallback: true })
defineExpose({
	setActivities
})
</script>

<style lang="scss" scoped>
.wallet-recharge-activity {
	.activity-item {
		position: relative;
		flex-shrink: 0;
		width: 156px;
		height: 150px;
		padding: 26px 8px;
		border-radius: 10px;
		border: 2px solid var(--color-bg-1);
		background: var(--color-bg-1) url('@/assets/img/wallet/deposit-bonus-bg.png') no-repeat;
		background-size: contain;
		transition: all 0.2s;
		overflow: hidden;
		&:not(:first-child) {
			margin-left: 7px;
		}
		&.recommend {
			background-image: url('@/assets/img/wallet/deposit-bonus-bg-recommend.png');
		}
		&.selected {
			border-color: var(--color-primary);
			.tnc-link {
				:deep(.icon-2up) {
					color: var(--color-primary);
				}
			}
		}
		.title {
			line-height: 18px;
		}
		.desc {
			margin-top: 6px;
			color: var(--color-text-2);
			font-size: 10px;
			line-height: 12px;
		}
		.recommend {
			position: absolute;
			top: 0;
			left: 0;
			height: 20px;
			padding: 0 11px;
			display: flex;
			align-items: center;
			border-bottom-right-radius: 10px;
			background-color: var(--color-warning);
		}
	}
}
</style>
